import styles from './index.module.less'
import type { SwiperItemProps } from '../../interface'

export const StudentTypePage = (props: SwiperItemProps) => {
    const {
        current,
        itemIndex,
        store: { dataSource },
    } = props
    const isActive = current === itemIndex
    const { degree_student_module, category_student_module } = dataSource || {}

    return (
        <div className={styles.page}>
            <div className={styles.peopleImage} />
            <div className={isActive ? styles.active : styles.page_top}>
                <div className={styles.page_top_content}>
                    <p>创业培训对象覆盖全面</p>
                    <p>
                        <span>{category_student_module?.category}</span>
                    </p>
                    <p>
                        共<span>{category_student_module?.student_num}</span>人
                    </p>
                    <p>
                        是参训学员类型中最多的，占比达
                        <span>{category_student_module?.student_percent}</span>
                    </p>
                </div>
            </div>

            <div className={isActive ? styles.active_bottom : styles.page_bottom}>
                <div className={styles.page_bottom_content}>
                    <p>学历层面</p>
                    <p>
                        <span>{degree_student_module?.degree}</span>人数最多
                    </p>
                    <p>
                        共<span>{degree_student_module?.student_num}</span>人, 占比达{' '}
                        <span>{degree_student_module?.student_degree_percent}</span>
                    </p>
                </div>
            </div>
        </div>
    )
}

export default StudentTypePage
